import React, { useEffect, useState } from 'react';
import {
  ProForm,
  ProFormDigit,
  ProFormText,
  ProFormRadio,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Form, Modal } from 'antd';
import { useIntl, FormattedMessage } from '@umijs/max';
import Tree, { DataNode } from 'antd/es/tree';
import { DictValueEnumObj } from '@/components/DictTag';

export type TenantpackageFormData = Record<string, unknown> & Partial<API.System.Tenantpackage>;

export type TenantpackageFormProps = {
  onCancel: (flag?: boolean, formVals?: TenantpackageFormData) => void;
  onSubmit: (values: TenantpackageFormData) => Promise<void>;
  open: boolean;
  values: Partial<API.System.Tenantpackage>;
  menuTree: DataNode[];
  menuCheckedKeys: string[];
  statusOptions: DictValueEnumObj;
};

const TenantpackageForm: React.FC<TenantpackageFormProps> = (props) => {
  const [form] = Form.useForm();
  const { menuTree, menuCheckedKeys } = props;
  const [menuIds, setMenuIds] = useState<string[]>([]);
  const { statusOptions } = props;

  useEffect(() => {
    form.resetFields();
    form.setFieldsValue({
      createBy: props.values.createBy,
      createTime: props.values.createTime,
      updateBy: props.values.updateBy,
      updateTime: props.values.updateTime,
      remark: props.values.remark,
      id: props.values.id,
      name: props.values.name,
      menuIds: props.values.menuIds,
      delFlag: props.values.delFlag,
      status: props.values.status !== undefined ? props.values.status.toString() : '0',
    });
  }, [form, props]);

  const intl = useIntl();
  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };
  const handleFinish = async (values: Record<string, any>) => {
    let value2 = Object.assign(values);
    value2.menuIds = menuIds.join(',');
    props.onSubmit({ ...value2 } as TenantpackageFormData);
  };

  return (
    <Modal
      width={640}
      title={intl.formatMessage({
        id: 'system.Tenantpackage.title',
        defaultMessage: '编辑角色信息',
      })}
      forceRender
      open={props.open}
      destroyOnClose
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <ProForm
        form={form}
        grid={true}
        layout="horizontal"
        submitter={false}
        onFinish={handleFinish}>
        <ProFormText name="id" hidden={true} />
        <ProFormText
          name="name"
          label={intl.formatMessage({
            id: 'system.Tenantpackage.name',
            defaultMessage: '套餐名',
          })}
          placeholder="请输入套餐名"
          rules={[
            {
              required: true,
              message: <FormattedMessage id="请输入套餐名！" defaultMessage="请输入套餐名！" />,
            },
          ]}
        />
        
        <ProFormRadio.Group
          valueEnum={statusOptions}
          name="status"
          label={intl.formatMessage({
            id: 'system.Tenantpackage.status',
            defaultMessage: '套餐状态',
          })}
          placeholder="请输入套餐状态"
          rules={[
            {
              required: true,
              message: <FormattedMessage id="请输入套餐状态！" defaultMessage="请输入套餐状态！" />,
            },
          ]}
          fieldProps={{
            defaultValue: '0',
          }}
        />
        <ProForm.Item
          name="menuIds"
          label={intl.formatMessage({
            id: 'system.Tenantpackage.auth',
            defaultMessage: '菜单权限',
          })}
        >
          <Tree
            checkable={true}
            multiple={true}
            checkStrictly={true}
            defaultExpandAll={false}
            treeData={menuTree}
            defaultCheckedKeys={menuCheckedKeys}
            onCheck={(checkedKeys: any) => {             
              return setMenuIds(checkedKeys.checked);
            }}
          />
        </ProForm.Item>
        <ProFormTextArea
          name="remark"
          label={intl.formatMessage({
            id: 'system.Tenantpackage.remark',
            defaultMessage: '备注',
          })}
          placeholder="请输入备注"
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入备注！" defaultMessage="请输入备注！" />,
            },
          ]}
        />
      </ProForm>
    </Modal>
  );
};

export default TenantpackageForm;
